.commonHighlightClass {
  text-align: center;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #33ccff;
  box-shadow: 0px 0px 15px #33ccff;
  border-radius: 50%;
  // -webkit-animation-name: 'amapHighlightAni'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1s; /*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s; /*动画延迟时间*/
  -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: alternate; /*定义动画方式*/
}

.amapHighlightClass {
  @extend .commonHighlightClass;
  -webkit-animation-name: 'amapHighlightAni';
}

@keyframes amapHighlightAni {
  0% {
    margin-left: 0;
    margin-top: 0;
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 15px #33ccff;
    opacity: 0.8;
  }

  100% {
    margin-left: 40px;
    margin-top: 40px;
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 10px #33ccff;
    opacity: 0.3;
  }
}

.googleHighlightClass {
  @extend .commonHighlightClass;
  -webkit-animation-name: 'googleHighlightAni';
}

@keyframes googleHighlightAni {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }

  50% {
    transform: scale(1);
    box-shadow: 0px 0px 15px #33ccff;
    opacity: 0.8;
  }

  100% {
    transform: scale(0);
    box-shadow: 0px 0px 10px #33ccff;
    opacity: 0.3;
  }
}
